<template>
  <div class="item" id="xinli">
    <div class="clear">
      <!-- 轮播tu -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in imglist" :key="index">
          <img :src="item" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 导航 -->
    <div class="headerNav">
      <ul>
        <li>
          <img src="../../assets/img-class/Class/矢量智能对象(3).png" alt="" />
          <a href="">课程分类</a>
        </li>
        <li>
          <img src="../../assets/img-class/Class/tu.png" alt="" />
          <a href="">低价体验</a>
        </li>
        <li>
          <img src="../../assets/img-class/Class/矢量智能对象(4).png" alt="" />
          <a href="">名师讲堂</a>
        </li>
        <li>
          <img src="../../assets/img-class/Class/qian.png" alt="" />
          <a href="">特价优惠</a>
        </li>
        <li>
          <img src="../../assets/img-class/Class/矢量智能对象(5).png" alt="" />
          <a href="">好课试听</a>
        </li>
      </ul>
    </div>
    <img src="../../assets/img-class/Class/navimg.png" alt="" class="our" />

    <!-- // 新课推荐H1标题 -->
    <div class="recommend">
      <headerH1 title="新课推荐" option="全部" :hasBtn="true"></headerH1>
      <van-tabs
        v-model:active="active"
        color="transparent"
        background="none"
        title-active-color="#040404"
        title-inactive-color="#9B9B9B"
      >
        <van-tab v-for="(item, index) in navList" :title="item" :key="index">
          <!-- 推荐 -->

          <recommend></recommend>

          <!-- 更多 -->
          <div class="rec_more">
            <button class="more">查看更多课程</button>
          </div>
          <img
            src="../../assets/img-class/Class/bigimg.png"
            alt=""
            class="more_down"
          />
        </van-tab>
      </van-tabs>
    </div>
    <!-- 好课试听<H1> -->
    <div class="try">
      <headerH1
        title="好课试听"
        option="换一批"
        :hasBtn="true"
        @click="handleClick"
      ></headerH1>
      <ul class="try_item">
        <li v-for="(item, index) in response.arr" :key="index">
          <img
            :src="item.img"
            alt=""
            style="width: 112px height:59px margin:0"
          />
          <p>{{ item.tip }}</p>
        </li>
      </ul>
    </div>
    <!-- 特惠<H1> -->
    <div class="price">
      <headerH1 title="特价优惠" option="更多" :hasBtn="true"></headerH1>
      <div class="box">
        <ul class="class_price">
          <price></price>
        </ul>
      </div>
    </div>
    <!-- // 名师讲堂 -->
    <div class="teacher">
      <headerH1
        title="名师讲堂"
        option="更多"
        :hasBtn="true"
        style="margin-bottom: 23px"
      ></headerH1>
      <teacher></teacher>
    </div>
    <!-- 专题课程 -->
    <div class="theme">
      <headerH1
        title="专题课程"
        :hasBtn="false"
        style="margin-bottom: 23px"
      ></headerH1>
      <div class="theme_box">
        <ul>
          <li v-for="(item, index) in response.special" :key="index">
            <div class="theme_top">
              <img :src="item.img" alt="" />
            </div>
            <div class="theme_bot">
              <p>{{ item.type[0] }}</p>
              <p>{{ item.type[1] }}</p>
              <p>{{ item.type[2] }}</p>
              <p>{{ item.type[3] }}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div class="end"><p>已经到底啦，查看全部课程</p></div>
    <img
      src="../../assets/img-class/Class/footerimg.png"
      alt=""
      class="footer"
    />
  </div>
</template>

<script>
import { reactive, onMounted } from "vue";

import headerH1 from "../../components/Class/headerH1.vue";
import recommend from "../../components/Class/recommend.vue";
import teacher from "../../components/Class/teacher.vue";
import price from "../../components/Class/price.vue";
import { getClassData } from "../../utils/api";

// import { Vue } from "vue";
import BetterScroll from "better-scroll";
export default {
  setup() {
    // 滑动导航推荐

    const navList = reactive([
      "为你推荐",
      "恋爱情感",
      "情绪压力",
      "亲子教育",
      "心理",
      "职业",
      "恋爱情感",
    ]);
    // 轮播
    const imglist = [
      "http://121.41.11.36:3000/images/classdetailimg/lunbo1.png",
      "http://121.41.11.36:3000/images/classdetailimg/lunbo2.png",
      "http://121.41.11.36:3000/images/classdetailimg/lunbo3.png",
      "http://121.41.11.36:3000/images/classdetailimg/lunbo5.png",
      "http://121.41.11.36:3000/images/classdetailimg/lunbo6.png",
    ];

    // 好课试听start
    // const ListenData = computed(() => store.state.class.res);
    // const Listen = () => store.dispatch("getClassAsync");
    // onMounted(() => {
    //   Listen();
    // });

    const response = reactive({
      arr: null,
      special: null,
    });

    onMounted(async () => {
      const res = await getClassData();

      changeData();
      response.special = res.data.result[2].there;
      // 横向滚动
      // await Vue.$nextTick();
      new BetterScroll(".theme_box", {
        scrollX: true,
        scrollY: false,
        click: true,
      });
    });
    const changeData = async () => {
      const res = await getClassData();
      const index = parseInt(Math.random() * 20);
      // console.log(index);
      response.arr = res.data.result[0].one.splice(index, 3);
    };
    // 好课试听   换一批
    const handleClick = () => {
      changeData();
    };

    return { navList, imglist, response, handleClick };
  },
  components: {
    headerH1,
    recommend,
    price,
    teacher,
  },
};
</script>

<style lang="less">
:root {
  --van-tabs-line-height: 60px;
}
#xinli {
  margin-top: 17px;
  .my-swipe {
    overflow: hidden;
    .van-swipe-item {
      width: 342px;
      height: 140px;
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;

      > img {
        width: 342px;
        height: 140px;
      }
    }
  }
  // 导航
  .headerNav {
    ul {
      width: 100%;
      margin-top: 33px;
      margin-bottom: 29px;
      margin-right: 30px;
      display: flex;
      justify-content: center;
      align-items: center;

      li {
        width: 20%;
        height: 44px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        img {
          width: 27px;
          height: 27px;
          margin: 0;
        }
        a {
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #1f1f1f;
        }
      }
    }
  }
  .our {
    width: 350px;
    height: 45px;
    margin: 0;
    margin-bottom: 35px;
    margin-left: 13px;
  }
  // H1标题推荐
  .recommend {
    .van-sticky {
      border-bottom: 1px solid #ccc;
      margin-bottom: 21px;
    }

    .van-tabs__wrap {
      // content: "";
      //
      // width: 100%;
      // height: 4px;
      // padding: 20px 0;
      // box-sizing: content-box;
      display: inline-block;
      // line-height: 20px;
      // border-bottom: 4px solid red
      .van-tabs__nav--line {
        border-bottom: 1px solid rgb(197, 195, 195) !important;
        .van-tabs__nav {
          padding-bottom: 35px;
          padding-top: 35px;
          box-sizing: border-box;
          display: block;
        }
      }
    }
    .van-tab__text {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: normal;
      line-height: 20px;
      font-weight: 600;

      .van-tab--active {
        color: #040404 !important;
        font-weight: 700;
      }
    }
    // 更多
    .rec_more {
      width: 100%;

      .more {
        display: block;
        margin: auto;
        width: 211px;
        height: 40px;
        background: #fafafa;
        border: none;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #787878;
      }
    }

    .more_down {
      width: 350px;
      height: 95px;
      margin: 25px 0px 40px 13px;
    }
  }
  // 试听
  .try {
    .try_item {
      margin-top: 25px;
      margin-right: 10px;
      display: flex;
      margin-bottom: 54px;
      margin-left: 13px;

      li {
        width: 33%;

        height: 169px;
        text-align: center;
        background-color: #fbfbfb;
        > img {
          width: 100%;
          height: 109px;
          margin: 0;
        }
        > p {
          width: 89px;
          height: 35px;
          overflow: hidden;
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #242424;
          line-height: 18px;
          text-align: left;
          margin: auto;
          margin-top: 15px;
        }
      }
    }
  }
  // 特惠
  .price {
    width: 360px;
    overflow: hidden;
    margin-bottom: 54px;
    .box {
      width: 375px;
      .class_price {
        padding-top: 15px;
        width: 830px;
        height: 215px;
        display: flex;
      }
    }
  }
  // 名师课堂
  //  <!-- 专题课程 -->
  .theme {
    margin-left: 15px;
    .theme_box {
      width: 360px;
      height: 232px;
      overflow: hidden;

      ul {
        display: flex;
        width: 1000px;
        li {
          width: 215px;
          height: 100%;
          margin-right: 18px;
          .theme_top {
            img {
              width: 219px;
              height: 100px;
              margin: 0;
            }
          }
          .theme_bot {
            height: 132px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #040404;
            line-height: 30px;
            text-align: center;
            background-color: #fbfbfb;
          }
        }
      }
    }
  }
  .end {
    p {
      width: 150px;
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #646464;
      margin: 35px auto;
    }
  }
  .footer {
    width: 100%;
    height: 59px;
    position: static;
  }
}
</style>
